<template>
	<div>
		<el-upload
			ref="upload"
			class="upload-image"
			:class="{'hidden-upload':fileList.length>=limit}"
			list-type="picture-card"
			:action="action"
			:file-list.sync="fileList"
			:headers="headers"
			:on-remove="handleRemove"
			:on-success="handleSuccess"
			:before-upload="beforeUpload"
			:before-remove="beforeRemove"
			:on-preview="handlePictureCardPreview"
			:limit="limit"
			:accept="inputAccept"
			:multiple="limit>1"
			:on-exceed="handleExceed"
			v-bind="$attrs"
		>
			<i class="el-icon-plus"></i>
			<div
				v-if="accept"
				slot="tip"
				class="el-upload__tip"
			>{{descText}}</div>
		</el-upload>
		<el-dialog
			class="img-dialog"
			width="500px"
			:visible.sync="dialogVisible"
		>
			<img
				width="100%"
				:src="dialogImageUrl"
			/>
		</el-dialog>
	</div>
</template>

<script>
	/* 
							"orderAccessorys":[{  
							"fileFormat": "string",//类型
							"fileSize": 0,
							"site": "string",
							}]
						*/
	import { mapGetters } from "vuex";
	export default {
		name: "upload-image",
		props: {
			value: {
				type: String,
				default: ""
			},
			url: {
				type: String,
				default: "/temp/getUploadImgReturnUrl.do"
			},
			btnText: {
				type: String,
				default: "点击上传"
			},
			maxSize: {
				type: Number,
				default: 2
			},
			accept: {
				type: String,
				default: ".png,.jpg,.jpeg,.bmp"
			},
			limit: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				fileList: [],
				dialogImageUrl: "",
				dialogVisible: false
			};
		},
		watch: {
			value(val) {
				if (val) {
					let arr = val.split(";");
					this.fileList = arr.map(i => ({ url: i }));
				} else {
					this.fileList = [];
				}
			}
		},
		computed: {
			...mapGetters({
				token: "user/token"
			}),
			action() {
				return (
					process.env.VUE_APP_API_PREFIX_URL +
					process.env.VUE_APP_UPLOAD_URL +
					this.url
				);
			},
			// token
			headers() {
				return {
					Authorization: `Bearer ${this.token}`
				};
			},
			descText() {
				return `支持格式：${this.accept} ，单个文件不能超过${this.maxSize}MB，最多上传个数：${this.limit} 。`;
			},
			inputAccept() {
				return this.accept.replace(".", "image/");
			}
		},
		methods: {
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

			handleExceed(files, fileList) {
				this.handleWarning(`只能选择 ${this.limit} 个文件`);
			},
			beforeUpload(file) {
				const { size, type, name } = file;
				return this.checkFileType(name) && this.checkFileSize(size);
			},
			beforeRemove(file, fileList) {
				// return this.$confirm(`确定移除 ${file.name}？`);
			},
			clearFiles() {
				this.$refs.upload.clearFiles();
			},
			async handleSuccess(res, file, fileList) {
				let reg = /^blob/;
				let arr = fileList.map(i => {
					if (reg.test(i.url)) {
						return i.response;
					} else {
						return {
							data: i
						};
					}
				});
				let errArr = arr.filter(i => !i);
				if (errArr.length) return;
				let ret = arr.map(i => i.data.url).join(";");
				this.$emit("change", ret);
				this.$emit("input", ret);
			},
			handleRemove(file, fileList) {
				let ret = fileList.map(i => i.url).join(";");
				this.$emit("change", ret);
				this.$emit("input", ret);
			},
			checkFileType(name) {
				let t = name.substring(name.lastIndexOf(".")).toLowerCase();
				if (this.accept.split(",").filter(i => i === t).length === 0) {
					this.handleWarning(`上传文件只能是 ${this.accept} 格式!`);
					return false;
				}
				return true;
			},
			checkFileSize(size) {
				if (size > 1024 * 1024 * this.maxSize) {
					this.handleWarning(`上传文件大小不能超过 ${this.maxSize} M!`);
					return false;
				}
				return true;
			}
		}
	};
</script>